import React from 'react'

import { QuestionCircleOutlined } from '@ant-design/icons';
import { Space, Table, Tag ,Button,Popconfirm } from 'antd';

import { accountListApi , delAccountApi} from '../../apis/userApi';

import AuthComponent,{authModes} from '../../components/AuthComponent';

import { useSelector ,useDispatch } from 'react-redux';


import * as usersModule from '../../store/modules/users';


import moment from "moment/moment";

export default function AccountList() {
  // const [data,setData]=React.useState([])
  //   const [total,setTotal]=React.useState(0)

  //   const [loading,setLoading] = React.useState(false)

  const dispatch=useDispatch()
  const {data,total,loading}=useSelector((state)=>{

        return state.users
  })
    
    
    React.useEffect(()=>{ 
      // getData()
        dispatch(usersModule.getData())
    },[])

  //  async function getData(params={pageSize:10,pageNumber:1}) {
  //     try { 
  //       // setLoading(true)
  //       dispatch(usersModule.setLoading(true))
  //       let res= await accountListApi(params)
  //     console.log('res',res)
  //     // setData(res.data)
  //     dispatch(usersModule.setDataAndTotal({
  //       data:res.data ,total:res.totalCount
  //     }))
  //     // setTotal(res.totalCount)
  //       // setLoading(false)
  //       dispatch(usersModule.setLoading(false))
  //     } catch (error) {

  //       console.log (error)
  //       dispatch(usersModule.setLoading(false))
  //       // setLoading(false)
  //     }
  //   }
      
    
    
    async function confirmDel(_id){
        // await delAccountApi(_id)
        // getData()
          dispatch(usersModule.del(_id))
      }


    function onChange(pageNumber,pageSize){
      console.log(pageNumber,pageSize)

        // getData({pageNumber,pageSize})
        dispatch(usersModule.getData({pageNumber,pageSize}))
    }
  const columns = [
    {  
      title: '账户名',
      dataIndex: 'account',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '角色',
      dataIndex: 'userGroup',
      key: 'age',
    },
    {
      title: '创建时间',
      dataIndex: 'createDate',
      key: 'address',
      render:(data)=>{
        return moment(data).format('YYYY-MM-DD HH:mm:ss')
      }
    },
   
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (

        <Popconfirm title="确定删除？" onConfirm={()=>confirmDel(record._id)}>
          <AuthComponent auth={'del_account'} authMode={authModes.openOrDisabled}>

            <Button type='primary' danger size='small' >删除</Button>

          </AuthComponent>


        </Popconfirm>
        
      ),
    },
  ];
  

  return (
    <Table loading={loading} columns={columns} dataSource={data} rowKey="_id" pagination={{total,onChange}}/>

  )
}
